<template>
  <div class="more-container">
    <div class="topsearch">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="keyword">
                <el-input
                  v-model="formData.keyword"
                  placeholder="搜索姓名/电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <div class="rightbtn fr">
                <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格 -->
    <studenttablehead :tabData='dataList' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange' v-if="issuccess">
      <el-table-column prop="record_state" label="建档状态" align="center">
        <template slot-scope='scope'>
          <span>{{scope.row.record_state.title}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="报名日期" align="center">
        <template slot-scope='scope'>
          <span v-if="scope.row.enroll_time">{{scope.row.enroll_time}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.record_state.value==96||scope.row.record_state.value==98">-</span>
          <div v-else>
            <el-link v-if='scope.row.record_state.value!=94 && checkPermission(["documentDone"])' type="primary" :underline='false' class="linkmar"  @click="finish(scope.row.id,scope.row.name)">完成</el-link>
            <el-link v-else class='disable-color'  type="" :underline='false'>完成</el-link>
            <el-link v-if='(scope.row.record_state.value==95||scope.row.record_state.value==99) && checkPermission(["documentDefer"])' type="primary" :underline='false' class="linkmar" @click="defer(scope.row.id,scope.row.name)">暂缓</el-link>
            <el-link v-else class='disable-color'  type="" :underline='false'>暂缓</el-link>
            <el-link v-if='scope.row.record_state.value!=94  && checkPermission(["documentStop"])' type="primary" :underline='false' class="linkmar" @click="stopdia(scope.row.id,scope.row.name)">终止</el-link>
            <el-link v-else class='disable-color'  type="" :underline='false'>终止</el-link>
          </div>
        </template>
      </el-table-column>
    </studenttablehead>

    <!-- 终止弹窗 -->
    <stopdialog @confirm='stopconfirm' :dialogparams='dialogparams' :isshowDialog='isshowstop' @closetextDialog='closestop' ></stopdialog>

    <!-- 暂缓弹窗 -->
    <deferdialog @confirm='deferconfirm' :isshowDialog='isshowdefer' :dialogparams='dialogparams' @closedefer='closedefer'></deferdialog>

  </div>
</template>

<script>
//表格
import studenttablehead from '@/components/studenthead'

//终止弹窗
import stopdialog from './component/stopdialog'

//暂缓弹窗
import deferdialog from './component/deferdialog'

//api
import {documenstudentlist,studentrecord} from '@/api/student'

  //按钮权限验证
  import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //数据是否加载成功
      issuccess:false,
       //弹窗参数
       dialogparams:{},
      //是否显示暂缓弹窗
      isshowdefer:false,
      //试学显示终止弹窗
      isshowstop:false,
      formData: {
        keyword: undefined,
      },
      rules: {
        keyword: [],
      },
      //页数
      page:1,
      //页面数量
      total:10,
      //列表总数量
      pagetotal:'',
      //表格数据
      dataList:{}
    }
  },
  methods: {
    checkPermission,
    //翻页 页面显示总数
    handleSizeChange(val){
      this.total = val
      //刷新列表
      this.getdocumenstudentlist()
    },
    //翻页码
    handleCurrentChange(val){
        this.page = val
        //刷新列表
        this.getdocumenstudentlist()
    },
    //终止成功
    stopconfirm(){
        //关闭弹窗
        this.isshowstop = false
        //刷新列表
        this.getdocumenstudentlist()
    },
    // 暂缓确认
    deferconfirm(){
      //关闭弹窗
      this.isshowdefer = false
      //刷新列表
      this.getdocumenstudentlist()
    },
    //获取学员列表
    async getdocumenstudentlist(){
      let params = {
        page:this.page,
        total:this.total,
        type:3,
        _request:3
      }
      if (this.formData.keyword) {
        params.keyword = this.formData.keyword
      }

      let data = await documenstudentlist(params)
      if(data.code=='0000'){
        this.dataList = data.data
        this.issuccess = true
      }
    },
    //关闭弹窗
    closedefer(){
      this.isshowdefer = false
    },
    //打开终止弹窗
    stopdia(id,name){
      let params = {
        id,
        name
      }
      this.dialogparams = params
      this.isshowstop = true
    },
    //关闭终止弹窗
    closestop(){
      this.isshowstop = false
    },
    //搜索
    searchlist() {
         this.getdocumenstudentlist()
      this.$message({
        type: 'success',
        message: '查询成功!',
      })
    },
    //重置
    resetform() {
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.$refs['elForm'].resetFields()
    },
    //完成操作提示
    finish(id,name){
      this.$confirm('完成建档后，可进入[ 学员列表 ]查看学员，确定为当前学员建档吗？', `完成建档-${name}`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            //参数
            let params = {
              student_id:id,
              type:1,
              _request:1
            }
            let data = await studentrecord(params)
            if(data.code=='0000'){
              this.$message.success('完成建档成功！')
              //刷新列表
              this.getdocumenstudentlist()
            }
        }).catch(() => {

        });
    },
    //暂缓操作
    defer(id,name){
        let params = {
          id,
          name
        }
        this.dialogparams = params
        this.isshowdefer = true
    }
  },
  components: {
    studenttablehead,
    stopdialog,
    deferdialog
  },
  mounted() {
    //获取列表信息
    this.getdocumenstudentlist()
  }
}
</script>
